<template>
	<!--LTableColumn参数说明 -->
	<div class="bg-white ml-[16px] mt-[16px]">
		<div class="p-[20px]">
			<div class="text-[36px] my-[20px]">l-page 页面参数说明</div>
			<el-table :data="pageData">
				<LTableColumn prop="data" label="参数" />
				<LTableColumn prop="desc" label="说明" />
				<LTableColumn prop="type" label="类型" />
				<LTableColumn prop="optional" label="可选值" />
				<LTableColumn prop="default" label="默认值" />
			</el-table>
			<div class="text-[36px] my-[20px]">l-table-column 表格列参数说明</div>
			<el-table :data="tableData">
				<LTableColumn prop="data" label="参数" />
				<LTableColumn prop="desc" label="说明" />
				<LTableColumn prop="type" label="类型" />
				<LTableColumn prop="optional" label="可选值" />
				<LTableColumn prop="default" label="默认值" />
			</el-table>
			<div class="text-[36px] my-[20px]">l-statistical-card 统计参数说明</div>
			<el-table :data="statisticalData">
				<LTableColumn prop="data" label="参数" />
				<LTableColumn prop="desc" label="说明" />
				<LTableColumn prop="type" label="类型" />
				<LTableColumn prop="optional" label="可选值" />
				<LTableColumn prop="default" label="默认值" />
			</el-table>
			<div class="text-[36px] my-[20px]">l-search 搜索按钮参数</div>
			<el-table :data="searchData">
				<LTableColumn prop="data" label="参数" />
				<LTableColumn prop="desc" label="说明" />
				<LTableColumn prop="type" label="类型" />
				<LTableColumn prop="optional" label="可选值" />
				<LTableColumn prop="default" label="默认值" />
			</el-table>
			<div class="text-[36px] my-[20px]">l-dialog 弹窗参数</div>
			<el-table :data="dialogData">
				<LTableColumn prop="data" label="参数" />
				<LTableColumn prop="desc" label="说明" />
				<LTableColumn prop="type" label="类型" />
				<LTableColumn prop="optional" label="可选值" />
				<LTableColumn prop="default" label="默认值" />
			</el-table>
		</div>
	</div>
</template>

<script>
export default {
	name: 'TableDesc',
	data() {
		return {
			pageData: [
				{
					data: 'page.sync',
					desc: '页码',
					type: 'number',
					optional: '-',
					default: '1',
				},
				{
					data: 'page-size.sync',
					desc: '页数',
					type: 'number',
					optional: '-',
					default: '10',
				},
				{
					data: 'total',
					desc: '总数',
					type: 'number',
					optional: '-',
					default: '-',
				},
				{
					data: '@getList',
					desc: '@getList="getList" 用于页码或页数查询',
					type: 'Function',
					optional: '-',
					default: '-',
				},
				{
					data: 'header',
					desc: 'slot="header" 插槽用于表单搜索',
					type: '-',
					optional: '-',
					default: '-',
				},
				{
					data: 'options',
					desc: 'slot="options" 插槽用于页面操作按钮的排放',
					type: '-',
					optional: '-',
					default: '-',
				},
				{
					data: 'card',
					desc: 'slot="card" 插槽用于统计数量',
					type: '-',
					optional: '-',
					default: '-',
				},
			],
			tableData: [
				{
					data: 'prop',
					desc: '对应列内容的字段名',
					type: 'string',
					optional: '-',
					default: '-',
				},
				{
					data: 'label',
					desc: '对应列名称',
					type: 'string',
					optional: '-',
					default: '-',
				},
				{
					data: 'type',
					desc: '对应列内容的类型',
					type: 'type=index为索引,type=string为字符串,type=number为数字,type=image为单张图片,type=image-array为数组图片,type=sortOrder为上下排序按钮,type=switch为状态开关,type=time为时间,type=options为操作列->默认使用插槽',
					optional: 'index/string/number/image/image-array/sortOrder/switch/time/options',
					default: 'string',
				},
				{
					data: 'align',
					desc: '对齐方式',
					type: 'string',
					optional: 'center/left/right',
					default: 'center',
				},
				{
					data: 'sortable',
					desc: '排序',
					type: 'boolean',
					optional: 'true/false',
					default: 'false',
				},
				{
					data: 'switch-options',
					desc: '状态开关配置参数具体参考element-ui switch组件参数',
					type: 'object',
					optional: JSON.stringify({
						activeText: '正常',
						activeValue: 0,
						inactiveText: '禁用',
						inactiveValue: 1,
					}),
					default: '{}',
				},
				{
					data: 'minWidth',
					desc: '最小宽度',
					type: 'number/string',
					optional: '-',
					default: '120',
				},
			],
			statisticalData: [
				{
					data: 'leftName',
					desc: '最左侧名称',
					type: 'string',
					optional: '-',
					default: '-',
				},
				{
					data: 'leftValue',
					desc: '最左侧值',
					type: 'string/number',
					optional: '-',
					default: '-',
				},
				{
					data: 'rightName',
					desc: '最右侧名称',
					type: 'string',
					optional: '-',
					default: '-',
				},
				{
					data: 'rightValue',
					desc: '最右侧值',
					type: 'string/number',
					optional: '-',
					default: '-',
				},
				{
					data: 'bgColor',
					desc: '背景颜色',
					type: 'string',
					optional: '-',
					default: 'linear-gradient(226deg, #606DD2 0%, #2838C5 100%)',
				},
			],
			searchData: [
				{
					data: '@search',
					desc: '搜索方法',
					type: 'Function',
					optional: '-',
					default: '-',
				},
				{
					data: '@refresh',
					desc: '刷新方法',
					type: 'Function',
					optional: '-',
					default: '-',
				},
			],
			dialogData: [
				{
					data: 'value',
					desc: 'v-model 显示/隐藏',
					type: 'boolean',
					optional: 'true/false',
					default: 'false',
				},
				{
					data: 'title',
					desc: '标题',
					type: 'string',
					optional: '-',
					default: '-',
				},
				{
					data: 'width',
					desc: '宽度 需要带px',
					type: 'string',
					optional: '-',
					default: '-',
				},
				{
					data: 'okButtonText',
					desc: '保存按钮的文字',
					type: 'string',
					optional: '-',
					default: '保存',
				},
				{
					data: 'closeButtonText',
					desc: '取消按钮的文字',
					type: 'string',
					optional: '-',
					default: '取消',
				},
				{
					data: 'onButtonWidth',
					desc: '保存按钮的宽度',
					type: 'string',
					optional: '-',
					default: 'auto',
				},
				{
					data: 'closeButtonWidth',
					desc: '取消按钮的宽度',
					type: 'string',
					optional: '-',
					default: 'auto',
				},
				{
					data: 'showButton',
					desc: '是否显示按钮(优先级最高)',
					type: 'boolean',
					optional: '-',
					default: 'true',
				},
				{
					data: 'showOkButton',
					desc: '是否显示确定按钮',
					type: 'boolean',
					optional: '-',
					default: 'true',
				},
				{
					data: 'showCloseButton',
					desc: '是否显示取消按钮',
					type: 'boolean',
					optional: '-',
					default: 'true',
				},
				{
					data: 'height',
					desc: '按钮高度',
					type: 'string',
					optional: '-',
					default: '60px',
				},
				{
					data: '@close',
					desc: '点击右上角X关闭弹窗方法',
					type: 'Function',
					optional: '-',
					default: '-',
				},
				{
					data: '@formClose',
					desc: '点击关闭按钮关闭弹窗',
					type: 'Function',
					optional: '-',
					default: '-',
				},
				{
					data: '@formSubmit',
					desc: '点击保存后',
					type: 'Function',
					optional: '-',
					default: '-',
				},
			],
		};
	},
};
</script>

<style scoped></style>
